<template>
  <div class="wrap chicken">
    <div class="chicken-titile">
      <img src="../assets/img/score.png" alt="" />
      <span>积分攻略</span>
    </div>
    <ul class="chicken-flex">
      <li>
        <img src="../assets/img/integral-01.9386d4bf.png" alt="" />
        <div class="chicken-txt">
          <h3>签到得积分</h3>
          <p>去签到</p>
        </div>
      </li>
      <li>
        <img src="../assets/img/integral-02.150d92a1.png" alt="" />
        <div class="chicken-txt">
          <h3>购课得积分</h3>
          <p>去购课</p>
        </div>
      </li>
      <li>
        <img src="../assets/img/integral-03.9870f3f1.png" alt="" />
        <div class="chicken-txt">
          <h3>推荐得积分</h3>
          <p>去推荐</p>
        </div>
      </li>
      <li>
        <img src="../assets/img/integral-04.afadcbdf.png" alt="" />
        <div class="chicken-txt">
          <h3>拼团得积分</h3>
          <p>去拼团</p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "JifenThreeChicken",

  data() {
    return {};
  },
};
</script>

<style lang="less" scoped>
.chicken {
  //   display: flex;
  height: 40;
  line-height: 40px;
  padding: 50px 0 18px;
  span {
    font-size: 30px;
    font-family: SourceHanSansSC;
    font-weight: bold;
    color: #333333;
    padding-left: 15px;
  }
}
.chicken-flex {
  margin: 12px 0 16px;
  display: flex;
  justify-content: space-between;
  color: #ffffff;
  li {
    width: 285px;
    height: 168px;
    position: relative;
    overflow: hidden;
    // 鼠标移上,里面的图片放大
    &:hover {
      img {
        transform: scale(1.1);
        transition: 0.5s;
      }
    }

    .chicken-txt {
      position: absolute;
      top: 43px;
      left: 20px;
      h3 {
        font-size: 30px;
        font-family: SourceHanSansSC;
        font-weight: bold;
      }
      p {
        width: 96px;
        height: 27px;
        border: 1px solid #ffffff;
        text-align: center;
        line-height: 27px;
        margin-top: 19px;
      }
    }
  }
}
</style>